<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link th:href="@{/js/el/element.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <style>
        .myLogin {
            width: 300px;
            /*绝对定位的方式*/
            position: absolute;
            /*定位登录div的位置*/
            left: 60%;
            top: 40%;
            transform: translate(-40%, -60%);
            /*内边距*/
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>
<body background="/css/img/login.jpg"
      style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed">
<div id="app">
    <div class="myLogin">
    <div>
        <el-input id="username" v-model="username" placeholder="请输入帐号">
            <template slot="prepend"><i class="el-icon-s-custom"></i></template>
        </el-input>
    </div>
    <div style="margin-top: 20px;">
        <el-input id="password" v-model="password" type="password" placeholder="请输入密码">
            <template slot="prepend"><i class="el-icon-unlock"></i></template>
        </el-input>
    </div>

    <div style="margin-top: 30px;">
        <el-button id="login" v-on:click="goLogin()" style="width:100%" type="primary" plain>登录</el-button>
        <h3><a href="/public/index">返回首页</a></h3>
    </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            goLogin: function () {
                var that = this;
                var vdata = {username: this.username, password: this.password};
                axios({
                    url: "/doLogin",
                    method: "post",
                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params: vdata
                }).then(function (resp) {
                    console.log(resp.data);
                    if (resp.data.code == 0) {
                        top.location.href = resp.data.action;
                    } else {
                        alert(resp.data.msg)
                        top.location.href = resp.data.action;
                    }
                })
            }
        }
    })
</script>
</html>